<template>
  <el-popover placement="top-start" :width="330" trigger="click" v-model:visible="visible">
    <template #reference>
      <img src="/public/face.png" class="icon-btn" />
    </template>
    <div class="qqFace" @click="choose($event)">
      <ul>
        <li>
          <img src="/public/face/1.gif" text="[em_1]" />
        </li>
        <li>
          <img src="/public/face/2.gif" text="[em_2]" />
        </li>
        <li>
          <img src="/public/face/3.gif" text="[em_3]" />
        </li>
        <li>
          <img src="/public/face/4.gif" text="[em_4]" />
        </li>
        <li>
          <img src="/public/face/5.gif" text="[em_5]" />
        </li>
        <li>
          <img src="/public/face/6.gif" text="[em_6]" />
        </li>
        <li>
          <img src="/public/face/7.gif" text="[em_7]" />
        </li>
        <li>
          <img src="/public/face/8.gif" text="[em_8]" />
        </li>
        <li>
          <img src="/public/face/9.gif" text="[em_9]" />
        </li>
        <li>
          <img src="/public/face/10.gif" text="[em_10]" />
        </li>
        <li>
          <img src="/public/face/11.gif" text="[em_11]" />
        </li>
        <li>
          <img src="/public/face/12.gif" text="[em_12]" />
        </li>
        <li>
          <img src="/public/face/13.gif" text="[em_13]" />
        </li>
        <li>
          <img src="/public/face/14.gif" text="[em_14]" />
        </li>
        <li>
          <img src="/public/face/15.gif" text="[em_15]" />
        </li>
        <li>
          <img src="/public/face/16.gif" text="[em_16]" />
        </li>
        <li>
          <img src="/public/face/17.gif" text="[em_17]" />
        </li>
        <li>
          <img src="/public/face/18.gif" text="[em_18]" />
        </li>
        <li>
          <img src="/public/face/19.gif" text="[em_19]" />
        </li>
        <li>
          <img src="/public/face/20.gif" text="[em_20]" />
        </li>
        <li>
          <img src="/public/face/21.gif" text="[em_21]" />
        </li>
        <li>
          <img src="/public/face/22.gif" text="[em_22]" />
        </li>
        <li>
          <img src="/public/face/23.gif" text="[em_23]" />
        </li>
        <li>
          <img src="/public/face/24.gif" text="[em_24]" />
        </li>
        <li>
          <img src="/public/face/25.gif" text="[em_25]" />
        </li>
        <li>
          <img src="/public/face/26.gif" text="[em_26]" />
        </li>
        <li>
          <img src="/public/face/27.gif" text="[em_27]" />
        </li>
        <li>
          <img src="/public/face/28.gif" text="[em_28]" />
        </li>
        <li>
          <img src="/public/face/29.gif" text="[em_29]" />
        </li>
        <li>
          <img src="/public/face/30.gif" text="[em_30]" />
        </li>
        <li>
          <img src="/public/face/31.gif" text="[em_31]" />
        </li>
        <li>
          <img src="/public/face/32.gif" text="[em_32]" />
        </li>
        <li>
          <img src="/public/face/33.gif" text="[em_33]" />
        </li>
        <li>
          <img src="/public/face/34.gif" text="[em_34]" />
        </li>
        <li>
          <img src="/public/face/35.gif" text="[em_35]" />
        </li>
        <li>
          <img src="/public/face/36.gif" text="[em_36]" />
        </li>
        <li>
          <img src="/public/face/37.gif" text="[em_37]" />
        </li>
        <li>
          <img src="/public/face/38.gif" text="[em_38]" />
        </li>
        <li>
          <img src="/public/face/39.gif" text="[em_39]" />
        </li>
        <li>
          <img src="/public/face/40.gif" text="[em_40]" />
        </li>
        <li>
          <img src="/public/face/41.gif" text="[em_41]" />
        </li>
        <li>
          <img src="/public/face/42.gif" text="[em_42]" />
        </li>
        <li>
          <img src="/public/face/43.gif" text="[em_43]" />
        </li>
        <li>
          <img src="/public/face/44.gif" text="[em_44]" />
        </li>
        <li>
          <img src="/public/face/45.gif" text="[em_45]" />
        </li>
        <li>
          <img src="/public/face/46.gif" text="[em_46]" />
        </li>
        <li>
          <img src="/public/face/47.gif" text="[em_47]" />
        </li>
        <li>
          <img src="/public/face/48.gif" text="[em_48]" />
        </li>
        <li>
          <img src="/public/face/49.gif" text="[em_49]" />
        </li>
        <li>
          <img src="/public/face/50.gif" text="[em_50]" />
        </li>
        <li>
          <img src="/public/face/51.gif" text="[em_51]" />
        </li>
        <li>
          <img src="/public/face/52.gif" text="[em_52]" />
        </li>
        <li>
          <img src="/public/face/53.gif" text="[em_53]" />
        </li>
        <li>
          <img src="/public/face/54.gif" text="[em_54]" />
        </li>
        <li>
          <img src="/public/face/55.gif" text="[em_55]" />
        </li>
        <li>
          <img src="/public/face/56.gif" text="[em_56]" />
        </li>
        <li>
          <img src="/public/face/57.gif" text="[em_57]" />
        </li>
        <li>
          <img src="/public/face/58.gif" text="[em_58]" />
        </li>
        <li>
          <img src="/public/face/59.gif" text="[em_59]" />
        </li>
        <li>
          <img src="/public/face/60.gif" text="[em_60]" />
        </li>
        <li>
          <img src="/public/face/61.gif" text="[em_61]" />
        </li>
        <li>
          <img src="/public/face/62.gif" text="[em_62]" />
        </li>
        <li>
          <img src="/public/face/63.gif" text="[em_63]" />
        </li>
        <li>
          <img src="/public/face/64.gif" text="[em_64]" />
        </li>
        <li>
          <img src="/public/face/65.gif" text="[em_65]" />
        </li>
        <li>
          <img src="/public/face/66.gif" text="[em_66]" />
        </li>
        <li>
          <img src="/public/face/67.gif" text="[em_67]" />
        </li>
        <li>
          <img src="/public/face/68.gif" text="[em_68]" />
        </li>
        <li>
          <img src="/public/face/69.gif" text="[em_69]" />
        </li>
        <li>
          <img src="/public/face/70.gif" text="[em_70]" />
        </li>
        <li>
          <img src="/public/face/71.gif" text="[em_71]" />
        </li>
        <li>
          <img src="/public/face/72.gif" text="[em_72]" />
        </li>
        <li>
          <img src="/public/face/73.gif" text="[em_73]" />
        </li>
        <li>
          <img src="/public/face/74.gif" text="[em_74]" />
        </li>
        <li>
          <img src="/public/face/75.gif" text="[em_75]" />
        </li>
      </ul>
    </div>
  </el-popover>
</template>
<script setup>
import { reactive, toRefs } from 'vue'

const emit = defineEmits(['setMsgBody'])

const state = reactive({
  visible: false
})

const choose = (e) => {
  if (e.target.tagName.toLowerCase() === "img") {
    const text = e.target.getAttribute("text");
    emit("setMsgBody", text, 1);
    state.visible = false
  }
}

const { visible } = toRefs(state)

</script>

<style scoped>
.qqFace ul {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 0;
  margin: 0;
  list-style: none;
}

.qqFace ul li {
  float: left;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}

.icon-btn {
  vertical-align: middle;
}
</style>
